<template>
  <div class="app-container">
    <basic-container>
      <div class="tag-tip">
        <el-tag color="#f08f00">审核中</el-tag>
        <el-tag color="#6bb377">已审核</el-tag>
        <el-tag color="#999">已结算</el-tag>
        <el-tag @click="newMeeting" color="#3aa1ff" style="cursor: pointer;">预约培训教室</el-tag>
      </div>
      <el-row type="flex" justify="space-between">
        <el-col :span="4">
          <div class="room-content">
            <div class="room-title">大学教室列表</div>
            <div class="room-list" :class="{'active-list': item.roomId === activeNum}"
                 v-for="(item, index) in classRoomList" :key="index" @click="chooseRoom(item)">
              <span>{{ item.roomName }}</span>
              <i class="iconfont icon-eye" @click="seeDetail(item)"></i>
            </div>
          </div>
        </el-col>
        <el-col :span="19">
          <div class="calendar-box">
            <full-calendar
                ref="fullCalendar"
                style="height: 100%;max-width: 100%;"
                :options="calendarOptions"
            >
            </full-calendar>
			<!-- <caldar></caldar> -->
          </div>
        </el-col>
      </el-row>
    </basic-container>
    <!-- 弹框 -->
    <el-dialog
        title="教室预约"
        :visible.sync="dialogVisible"
        width="50%"
        :before-close="closeDialog"
        :close-on-click-modal="false"
    >
      <div>
        <el-form :model="ruleForm" :rules="rules"  ref="ruleForm" label-width="100px" :disabled="editFlag">
          <el-row>
            <el-col :span="24">
              <el-form-item label="培训主题" style="width: 100%" prop="subject">
                <el-input v-model="ruleForm.subject" placeholder="请输入培训主题"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="培训申请原因" style="width: 100%" prop="memo">
                <el-input v-model="ruleForm.memo" placeholder="请输入培训申请原因"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="教室预约人" prop="applicantId">
                <el-select
                    style="width: 100%"
                    v-model="ruleForm.applicantId"
                    filterable
                    remote
                    placeholder="请选择教室预约人"
                    @focus="tagFoucs"
                    @change='userChage'
                    :remote-method="remoteMethod"
                    :loading="userSearchLoading ">
                  <el-option
                      v-for="item in userList"
                      :key="item.id"
                      :label="item.nickName"
                      :value="item.id">
                      <span style="float: left">{{ item.nickName }}</span>
                      <span style="float: left">（{{ item.userName }}）</span>
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="联系方式" style="width: 100%" prop="extNo">
                <el-input v-model="ruleForm.extNo" maxlength="11" placeholder="请输入联系方式"></el-input>
				<!-- <el-input v-model.number="ruleForm.userNumber"></el-input> -->
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="培训教室" style="width: 100%" prop="roomId">
                <el-select v-model="ruleForm.roomId" @change="change" placeholder="请选择教室地点" style="width: 100%">
                  <el-option
                      v-for="item in classRoomList"
                      :key="item.roomId"
                      :label="item.roomName"
                      :value="item.roomId">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="费用">
                <div class="remark">
					<span v-if="roomInfo && roomInfo.cost">
						{{ `${roomInfo.cost}/h` }}
					</span>
                </div>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="教室用途" style="width: 100%" prop="typeId">
                <el-select v-model="ruleForm.typeId" filterable placeholder="请选择" style="width: 100%">
                  <el-option
                      v-for="item in roomTypeList"
                      :key="item.purposeId"
                      :label="item.purposeName"
                      :value="item.purposeId">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="备注" style="width: 100%">
                <!-- <el-input v-model="roomInfo.remark" disabled ></el-input> -->
                <div class="remark">
					<span v-if="roomInfo && roomInfo.remark">
						{{ roomInfo.remark }}
					</span>
                </div>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="参与人数" prop="userNumber">
                <el-input v-model.number="ruleForm.userNumber"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="开始日期" style="width: 100%" prop="showStartDate">
                <el-date-picker
                    v-model="ruleForm.showStartDate"
                    type="date"
                    value-format="yyyy-MM-dd"
                    format="yyyy-MM-dd"
                    @change="startDateChoose"
                    :picker-options='pickerOptions'
                    style="width: 100%"
                    placeholder="选择日期">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-time-select
                  :disabled="!ruleForm.showStartDate"
                  v-model="ruleForm.showStartTime"
                  default-value='10:00'
                  :picker-options="{
					start: '00:00',
					step: '00:30',
					end: '23:30 ',
					minTime: minStartTime
				}"
                  placeholder="选择时间">
              </el-time-select>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="结束日期" style="width: 100%" prop="showEndDate">
                <el-date-picker
                    v-model="ruleForm.showEndDate"
                    @change="endDateChoose"
                    @input="daterangeChange"
                    type="date"
                    style="width: 100%"
                    value-format="yyyy-MM-dd"
                    format="yyyy-MM-dd"
                    :picker-options='pickerOptions'
                    placeholder="选择日期">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-time-select
                  :disabled="!ruleForm.showEndDate"
                  default-value='10:00'
                  @input="timeangeChange"
                  v-model="ruleForm.showEndTime"
                  :picker-options="{
					start: '00:00',
					step: '00:30',
					end: '23:30 ',
					minTime: minEndTime
				}"
                  placeholder="选择时间">
              </el-time-select>
            </el-col>
          </el-row>
          <el-row v-if="false">
            <el-col :span="24">
              <el-form-item label="物资需求">
                <el-checkbox-group v-model="mrMaterialIds">
                    <el-checkbox @change="checkChange(item)" v-for="item in materialList" :label="item.materialId"
                                :key="item.materialId">
                      {{ item.materialName }}
                    </el-checkbox>
                </el-checkbox-group>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="其他需求">
                <el-input
                    type="textarea"
                    :autosize="{ minRows: 2, maxRows: 4}"
                    placeholder="请输入其他需求"
                    v-model="ruleForm.otherRemark">
                </el-input>
              </el-form-item>
              <div class="tip">
                （提示：爱护教室物品，如有丢失或损坏，照价赔偿）
              </div>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
			<el-button @click="closeDialog">关闭</el-button>
			<el-button type="primary" v-if="cancelMeetingStatus" @click="cancelMeeting">取消预约</el-button>
			<el-button v-if="!editFlag" type="primary" @click="addEvents('ruleForm')" :loading="addLoading">确 定</el-button>
		</span>
    </el-dialog>
    <!--教室详情弹出窗 start-->
	<detailsDialog ref="detailsDia" :details='model'></detailsDialog>
    <!--教室详情弹出窗 end-->
  </div>
</template>

<script>
import api from "@/api/classroom/classroom";
import {mapGetters} from "vuex";
// 教室日历组件
import FullCalendar from "@fullcalendar/vue";
import dayGridPlugin from "@fullcalendar/daygrid";
import interactionPlugin from "@fullcalendar/interaction";
import detailsDialog from './components/details-dialog';
// import caldar from './components/caLendar';

export default {
  components: {
	FullCalendar, // make the <FullCalendar> tag available
	detailsDialog,
  },
  data() {
    return {
		addLoading: false,
		cancelMeetingStatus: false,
		userList: [],
		userSearchLoading: false,
		editFlag: false,
		model: {},
		equipmenteList: [], // 设备
		pickerOptions: {
			disabledDate(time) {
			let dateTime = new Date();
			let startDateTime = dateTime.setDate(dateTime.getDate() - 1);
			let endDateTime = dateTime.setDate(dateTime.getDate() + 10);
			return (
				time.getTime() < new Date(startDateTime).getTime() ||
				time.getTime() > new Date(endDateTime).getTime()
			);
			},
		},
		calendarApi: null,
		dialogVisible: false,
		classRoomList: [],
		roomTypeList: [],
		materialList: [],
		subList: [],
		roomInfo: {},
		activeNum: 0,
		tablePage: {
			total: 0,
			page: 1,
			size: 10,
			background: true,
			totalElements: 0,
		},
		minStartTime: '',
		minEndTime: '',
		ruleForm: {
      typeId: '',
      extNo: '',
			subject: '',
			memo: '',
			roomId: '',
			cost: '',
			userNumber: '',
			applicantId: '',
			beginDate: '',
			endDate: '',
			otherRemark: '',
			mrMaterialDtls: [],
			roomName: '',
			showStartDate: '',
			showStartTime: '',
			showEndDate: '',
			showEndTime: ''
		},
		mrMaterialIds: [],
		calendarOptions: {
			//   timeGridPlugin  可显示每日时间段
			height: 700,
			plugins: [dayGridPlugin, interactionPlugin],
			headerToolbar: {
				left: "prev,next today",
				center: "title",
				right: "dayGridMonth,dayGridWeek,dayGrid",
				// right: 'agendaWeek,dayGridWeek,dayGrid'
			},
			handleWindowResize: true,
			buttonText: {
				// 设置按钮
				today: "今天",
				month: "月",
				week: "周",
				dayGrid: "天",
			},
			// allDaySlot: false,
			editable: true,
			selectable: true,
			navLinks: true,
			// displayEventEnd: true,//所有视图显示结束时间
			initialView: "dayGridMonth", // 设置默认显示月，可选周、日
			dateClick: this.handleDateClick,
			eventClick: this.handleEventClick,
			eventsSet: this.handleEvents,
			select: this.handleDateSelect,
			// timezone
			// 设置日程
			events: [
			],
			eventColor: "#f08f00", // 修改日程背景色
			locale: "zh-cn", // 设置语言
			weekNumberCalculation: "ISO", // 周数
			customButtons: {
			prev: { // this overrides the prev button
				text: "PREV",
				click: () => {
				this.prev();
				}
			},
			next: { // this overrides the next button
				text: "PREV",
				click: () => {
				// let calendarApi = this.$refs.fullCalendar.getApi();
				// calendarApi.next();
				this.next();
				}
			},
			today: {
				text: "今天",
				click: () => {
				this.today();
				}
			}
			}
		},
		rules: {
			typeId: [
				{required: true, message: '请选择会议类型', trigger: 'change'}
			],
			subject: [
				{required: true, message: '请输入会议名称', trigger: 'blur'}
			],
			memo: [
				{required: true, message: '请输入会议申请原因', trigger: 'blur'}
			],
			extNo: [
				{required: true, message: '请输入联系方式', trigger: 'blur'}
			],
			roomId: [
				{required: true, message: '请选择教室地点', trigger: 'change'}
			],
			userNumber: [
				{required: true, message: '请输入参与人数', trigger: 'blur'},
				{type: 'number', message: '参与人数必须为数字'}
			],
			showEndDate: [
				{ required: true,message: '请选择日期', trigger: 'blur'}
			],
			showStartDate: [
				{required: true, message: '请选择日期', trigger: 'blur'}
			],
			showStartTime: [
				{required: true, message: '请选择时间', trigger: 'blur'}
			],
			showEndTime: [
				{required: true, message: '请选择时间', trigger: 'blur'}
			],
			applicantId: [
				{required: true, message: '请选择教室使用人', trigger: 'change'}
			]
		}
    };
  },
  created() {
    this.init();
  },
  mounted() {
        // 获取用户信息
        
        this.calendarApi = this.$refs.fullCalendar.getApi();
  },
  computed: {
    ...mapGetters(["userInfo"]),
    ...mapGetters(["isCollapse"]),
  },
  watch: {
	isCollapse() {
		setTimeout(function(){
            //日历自动适配
			if(document.createEvent) {
				var event = document.createEvent("HTMLEvents");
				event.initEvent("resize", true, true);
				window.dispatchEvent(event);
			} else if(document.createEventObject) {
				window.fireEvent("onresize");
			}
		},200);
	}
  },
  methods: {
    async init() {
		await this.getEquipmente();
		await this.getRoomList();
		await this.getMaterial();
    },
    // 选择开始时间
    startDateChoose() {
		// 最小开始时间： 1. 若选择当天 则需大于当前时间 2. 若大于当天 则可选择任意时间
		let now = new Date();
		let today = now.toISOString().substring(0, 10);
		if (this.ruleForm.showStartDate === today) {
			this.minStartTime = `${new Date().getHours()}:${new Date().getMinutes()}`;
		} else {
			this.minStartTime = '';
		}
    },
    phoneChange() {
        this.$forceUpdate();
    },
    // 获取用户信息
    remoteMethod(query) {
		this.userSearchLoading = true;
		api.queryUser({
			resource: query
		}).then(res => {
			// console.log(res);
			this.userList = res.content;
			this.userSearchLoading = false;
		})
		.catch((err) => {
			console.log(err);
			this.userSearchLoading = false;
		})
    },
    tagFoucs() {
		this.remoteMethod('');
    },
    userChage() {
		this.remoteMethod('');
    },
    // 选择结束时间
    endDateChoose() {
      // 最小结束时间： 1.若开始时间等于结束时间 则需大于开始时间 2. 若不相等 则可选择任意时间
      if (this.ruleForm.showEndDate < this.ruleForm.showStartDate) {
        this.$message({
			message: '结束时间不能小于开始时间',
			type: 'warning'
        });
        // this.ruleForm.showEndDate = '';
        this.$nextTick(() => {
			this.$set(this.ruleForm, "showEndDate", '');
        })
        return;
      }
      if (this.ruleForm.showStartDate == this.ruleForm.showEndDate) {
        this.minEndTime = this.ruleForm.showStartTime;
      } else {
        this.minEndTime = '';
      }
    },
    // 选择结束日期input 事件
    daterangeChange(e) {
		this.$nextTick(() => {
			this.$set(this.ruleForm, "showEndDate", e);
			this.$forceUpdate();
		});
		this.endDateChoose();
    },
    // 选择结束时间input 事件
    timeangeChange(e) {
		this.$nextTick(() => {
			this.$set(this.ruleForm, "showEndTime", e);
			this.$forceUpdate();
		});
    },
    // 获取教室室列表
    getRoomList() {
      const params = {
        page: this.tablePage.page,
        size: 1000,
        status: 1
      };
      api.queryClassroomList(params, "get").then((res) => {
		this.classRoomList = res.content;
		if (res && res.content &&res.content.length ) {
			this.activeNum = Number(res.content[0].roomId);
		}
		this.getCompList(this.activeNum);
        if (res.content && res.content && res.content.length) {
          this.getReservationList(res.content[0].roomId);
        }
        this.classRoomList.forEach((item) => {
          item.eqName = '';
          this.equipmenteList.forEach((itm) => {
            if (item.equipId.indexOf(itm.equipId) != -1) {
              item.eqName += `${itm.equipName},`;
            }
          })
          item.eqName = item.eqName.slice(0,item.eqName.length-1);
        });
      });
    },
    // 获取设备
    getEquipmente() {
      const params = {};
      return api.queryEquipmente(params, 'get').then((res) => {
        this.equipmenteList = res.content;
      })
    },
    // 点击查看教室详情
    seeDetail(val) {
		event.stopPropagation();
		this.$refs.detailsDia.show();
        this.model = val;
        this.model.purposeId = val.purposeId ? val.purposeId.split(',') : [];
    },
    // 获取教室类型列表
    getCompList(data) {
      const params = {
        roomId: data
      }
      api.queryPurposesById(params, 'get').then((res) => {
        this.roomTypeList = res;
      });
    },
    // 获取物资列表
    getMaterial() {
      const params = {
        page: this.tablePage.page,
        size: 1000,
      }
      api.queryMaterialList(params, 'get').then((res) => {
        this.materialList = res.content;
      });
    },
    // 选择教室室
    chooseRoom(value) {
      this.activeNum = value.roomId;
      // 查询该教室室下面的教室事件
      this.getReservationList(this.activeNum);
    },
    // 转换时间
    transDate(d) {
      var youWant = d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate() + ' ' + d.getHours() + '0:' + d.getMinutes() + '0:0' + d.getSeconds();
      return youWant;
    },
    // 获取教室下面的教室
    getReservationList(roomId) {
      // 此处应该改外不分页查询
      const params = {
        beginDate: this.transDate(this.calendarApi.currentData.viewApi.activeStart),
        endDate: this.transDate(this.calendarApi.currentData.viewApi.activeEnd),
        roomId,
        page: 1,
        size: 1000,
      };
      api.queryRoomDetailList(params, "get").then((res) => {
        let newArr = [];
        this.subList = res.content;
        res.content.forEach((item) => {
          newArr.push({
            start: this.dealWithTime(item.beginDate),
            end: this.addDate(this.dealWithTime(item.endDate), 1),
            color: this.colorType(item.status),
            id: item.recordId,
            title: `${this.getTitle(item.beginDate, item.endDate)} ${item.applicantName}`,
          })
        });
        // console.log(newArr, 'newArr');
        this.calendarOptions.events = newArr;
      });
    },
    // 日期加1天
    addDate(date, days) {
      var d = new Date(date);
      d.setDate(d.getDate() + days);
      var mon = (d.getMonth() + 1) < 10 ? "0" + (d.getMonth() + 1) : d.getMonth() + 1;
      let endD = d.getDate() < 10 ? '0' + d.getDate() : d.getDate();
      return `${d.getFullYear()}-${mon}-${endD}`;
    },
    // 处理教室事件格式
    dealWithTime(date) {
      let newDate = /\d{4}-\d{1,2}-\d{1,2}/g.exec(date)[0];
      return newDate;
    },
    // 获取教室事件title
    getTitle(date1, date2) {
      let start = date1.substring(11, 16);
      let end = date2.substring(11, 16);
      return `${start}~${end}`;
    },
    // 根据教室室id 获取教室室详情
    change(roomId) {
		const params = {
			roomId
		};
		// 获取教室室name
		this.ruleForm.roomName = this.classRoomList.filter((item) => {
			return item.roomId == roomId
		})[0].roomName;
		api.queryRoomInfoWithId(params, 'get').then((res) => {
			// console.log(res);
			if (res&&res.length) {
				this.roomInfo = res[0];
				this.ruleForm.cost = res[0].cost;
			}
		});
		this.getCompList(roomId);
    },
    handleEvents(events) {
    //   console.log(events)
    },
    // 根据状态渲染不同的颜色
    colorType(status) {
		let result = null;
		switch (status) {
			case 2:
				result = 'rgb(240, 143, 0)';
				break;
			case 3:
				result = 'rgb(107, 179, 119)'
				break;
			case 7:
				result = 'rgb(153, 153, 153)'
				break;
			default:
				result = 'rgb(240, 143, 0)';
				break
		}
		return result;
    },
    // 切换上一个按钮
    prev() {
		this.calendarApi.prev();
        this.getReservationList(this.activeNum);
    },
    // 切换下一个按钮事件
    next() {
		this.calendarApi.next();
		this.getReservationList(this.activeNum);
    },
    // 点击今天按钮
    today() {
		this.calendarApi.today();
		this.getReservationList(this.activeNum);
    },
    // 物资多选框选择事件
    checkChange(data) {
      //   console.log(data);
    },
    // 处理物资list
    getMaterialList() {
		let arr = [];
		this.materialList.forEach((item) => {
			this.mrMaterialIds.forEach((itm) => {
				if (item.materialId === itm) {
				arr.push(item);
				}
			})
		});
		//   return arr;
		this.ruleForm.mrMaterialDtls = arr;
    },
    // 点击日历
    handleDateClick: function (arg) {
		this.$forceUpdate();
		this.cancelMeetingStatus = false;
		this.editFlag = false;
		this.dialogVisible = true;
		this.ruleForm.roomId = this.activeNum;
		this.change(this.activeNum);
    },
    // 添加日历事件
    addEvents(formName) {
		this.$refs[formName].validate((valid) => {
			if (valid) {
        if (!this.ruleForm.showStartTime) {
          this.$message({
            message: '请选择开始时间',
            type: 'warning'
          })
          return;
        }
        if (!this.ruleForm.showEndTime) {
          this.$message({
            message: '请选择结束时间',
            type: 'warning'
          })
          return;
        }
				// 获取物资list
				this.getMaterialList();
				this.ruleForm.beginDate = `${this.ruleForm.showStartDate} ${this.ruleForm.showStartTime}`;
        this.ruleForm.endDate = `${this.ruleForm.showEndDate} ${this.ruleForm.showEndTime}`;
        if(this.ruleForm.beginDate>=this.ruleForm.endDate){
          return this.$message({
            message: '结束时间不能小于开始时间',
            type: 'warning'
          })
        }
				// console.log(this.ruleForm);
				this.addLoading = true;
				api.queryRoomSubscribe(this.ruleForm).then(() => {
					this.resetForm();
					this.addLoading = false;
					this.dialogVisible = false;
					this.$message({
						message: '预约成功！',
						type: 'success'
					});
					// this.$refs['ruleForm'].resetFields();
					this.getReservationList(this.activeNum);
				}).catch(err => {
					console.log(err);
					this.addLoading = false;
				})
			} else {
				console.log('error submit!!');
				return false;
			}
		});
    },
    //取消预约教室
    cancelMeeting() {
		const params = {
			recordId: this.ruleForm.recordId,
			beginDate: this.ruleForm.beginDate,
			status: this.ruleForm.status
		}
		// console.log(this.ruleForm)
		api.queryChanel(params).then(() => {
			this.getReservationList(this.activeNum);
			this.dialogVisible = false;
			this.resetForm();
			this.$message({
				type: 'success',
				message: '取消成功!'
			});
		});
    },
    // 日历事件点击事件
    handleEventClick(calEvent) {
        this.remoteMethod('');
		this.editFlag = true;
		let id = calEvent.event.id;
		let info = this.subList.filter((item) => {
			return item.recordId == id
		});
		//获取当前教室详情
		this.dialogVisible = true;
		this.$nextTick(() => {
			this.ruleForm = _.cloneDeep(info[0]);
			// 判断是否可以取消预约
			this.judeCancel(this.ruleForm);
			// 处理物资ids回显物资
			this.mrMaterialIds = this.getMatIds(this.ruleForm.mrRecordDtlDto);
			// 处理时间回显
			this.getShowTime(this.ruleForm.beginDate, this.ruleForm.endDate);
			// 回显教室室价格 备注信息
			this.getRoomInfo(this.ruleForm.roomId);
			// 将手机号转为 Number格式
			// this.ruleForm.extNo = this.ruleForm.extNo ? Number(this.ruleForm.extNo) : null;
		});
    },
    //点击预约教室按钮
    newMeeting() {
		this.cancelMeetingStatus = false;
		this.editFlag = false;
		this.dialogVisible = true;
    },
    //判断用户是否可以取消预约
    judeCancel(value) {
		// this.ruleForm.endDate
		// 用户相同  教室开始之后不能取消  教室已审核
		var now = new Date().getTime();
		var etime = new Date(value.beginDate).getTime();
		var usedTime = etime - now;  //两个时间戳相差的毫秒数
		//计算出小时数
		var hours = (usedTime / (60 * 60 * 1000)).toFixed(2);
		if (value.applicantId === this.userInfo.id && hours >= 0.5 && value.status === 3) {
			this.cancelMeetingStatus = true;
		} else {
			this.cancelMeetingStatus = false;
		}
    },
    // 获取教室室信息回显
    getRoomInfo(roomId) {
		const params = {
			roomId
		};
		api.queryRoomInfoWithId(params, 'get').then((res) => {
			// console.log(res);
			if (res&&res.length) {
				this.roomInfo = res[0];
				// this.ruleForm.cost = res[0].cost;
			}
		});
    },
    // 获取物资id
    getMatIds(value) {
		let arr = [];
		if (value && value.length) {
			value.forEach((item) => {
				arr.push(item.materialId);
			})
		} else {
			arr = [];
		}
		return arr;
    },
    getShowTime(beginDate, endDate) {
		this.ruleForm.showStartDate = this.dealWithTime(beginDate);
		this.ruleForm.showStartTime = this.getHoursMin(beginDate);
		this.ruleForm.showEndDate = this.dealWithTime(endDate);
		this.ruleForm.showEndTime = this.getHoursMin(endDate);
    },
    // 获取时分时间
    getHoursMin(value) {
		return value.substring(11, 16);
    },
    handleDateSelect(selectInfo) {
    //   console.log(selectInfo)
    },
    handleClose() {
    },
    // 关闭教室室预约弹框
    closeDialog() {
		this.resetForm();
    },
    // 重置表单
    resetForm() {
		this.$refs['ruleForm'].resetFields();
		this.roomInfo = {};
		this.mrMaterialIds = [];
		this.ruleForm.beginDate = '';
		this.ruleForm.roomId = '';
		this.ruleForm.endDate = '';
		this.ruleForm.showStartDate = null;
		this.ruleForm.showEndDate = null;
		this.ruleForm.showStartTime = null;
		this.ruleForm.showEndTime = null
		this.ruleForm.mrMaterialDtls = [];
		this.ruleForm.otherRemark = '';
		this.dialogVisible = false;
		this.$forceUpdate();
    }
  },
};
</script>

<style lang="scss" scoped>
@import "../../styles/classroom-style/classroom";
.icon-eye{
  font-size: 16px;
}
.el-col {
  margin-bottom: 0
}
.el-checkbox {
	width: 20%;
}
.active-list {
	background-color: #3AA1FF;
	color: #fff
}
.calendar-box {
	height: 710px;
	overflow-y: scroll;
}
.fc {
	max-width: 100% !important;
}
.remark {
	border-color: #EEE;
	cursor: not-allowed;
	-webkit-appearance: none;
	background-color: #FFF;
	background-image: none;
	border-radius: 4px;
	border: 1px solid #C3C3C3;
	box-sizing: border-box;
	color: #000;
	height: 32px;
	line-height: 32px;
	padding: 0 15px;
	width: 100%;
	overflow:hidden; //超出文本隐藏
	white-space:nowrap; //溢出不换行
	text-overflow:ellipsis; //溢出省略号显示
}
.tip{
  text-align: center;
  position: relative;
  top: 20px;
  color: #F08F00;
  font-weight: 800;
}
</style>